
var markers = [];
var map;

function getRoadInfo_Cat2(tm){
	var currentTime = new Date(getCurrentTime(tm));
	map = getNativeMap(tm);
// 	map.clearOverlays();
	var f3 = JSON.parse(getF3Metadata());
	var m4 = JSON.parse(getM4Metadata());
	var m7 = JSON.parse(getM7Metadata());
	
	var timeIcon1 = new GIcon(G_DEFAULT_ICON);
	timeIcon1.image = "../resources/f3.gif";
    timeIcon1.iconSize = new GSize(20, 20);
	newMarkerOptions1 = { icon : timeIcon1};
	
	var timeIcon2 = new GIcon(G_DEFAULT_ICON);
	timeIcon2.image = "../resources/m4.gif";
    timeIcon2.iconSize = new GSize(20, 20);
	newMarkerOptions2 = { icon : timeIcon2};
	
	var timeIcon3 = new GIcon(G_DEFAULT_ICON);
	timeIcon3.image = "../resources/m7.gif";
    timeIcon3.iconSize = new GSize(20, 20);
	newMarkerOptions3 = { icon : timeIcon3};
	
	var arr = searchInfoFromTime(currentTime, f3);
 	visualize(map, arr, newMarkerOptions1);
	arr = searchInfoFromTime(currentTime, m4);
 	visualize(map, arr, newMarkerOptions2);
	arr = searchInfoFromTime(currentTime, m7);
 	visualize(map, arr, newMarkerOptions3);
}

function getCurrentTime(tm){
	return tm.getState().date;
}

function getNativeMap(tm){
	return tm.getNativeMap();
}

function getMetadata(url){
	var json = (function(){
		var obj = null;
		$.ajax({
			'async':false,
			'global':false,
			'url':url,
			'dataType':"json",
			'success':function(data){
				obj = data;
			}
		});
		return obj;
	})();
	return json;
}

function getF3Metadata(){
	return getMetadata(metadata_request_url+"?cate=f3");
}

function getM4Metadata(){
	return getMetadata(metadata_request_url+"?cate=m4");
}

function getM7Metadata(){
	return getMetadata(metadata_request_url+"?cate=m7");
}

function searchInfoFromTime(time, roads){
	var arrPlaces = new Array();
	for(var i = 0; i < roads.length; i++){
		var obj = roads[i];
		var place = new Object();
		for(var j = 0; j < obj.timeline.length; j++){
			if(time.getTime() > (new Date(obj.timeline[j].start)).getTime() && time.getTime() < (new Date(obj.timeline[j].end)).getTime()){
				place.travelTime = obj.timeline[j].travelTime;
			}else{
				
			}
		}
		place.layerName = obj.layerName;
		place.id = obj.id;
		place.to = obj.to;
		place.from = obj.from;
		place.direction = obj.direction;
		place.lat = obj.point.lat;
		place.lng = obj.point.lon;	
		arrPlaces.push(place);
	}
	return arrPlaces;
}

// Creates a marker whose info window displays the letter corresponding
// to the given index.
function createMarker(place, options, info) {
	var marker = new GMarker(place, options);
	var infoHtml = "<div style=\"background-color;height:100px;width:250px;\">";
	infoHtml += "<h3 style=\"background-color:#6495ed;font-size:13px;\"> " + info.layerName + "</h3>";
	infoHtml += "<p style=\"background-color:#e0ffff;font-size:12px;\"> From " + info.from + " to "+ info.to +"</p>";
	infoHtml += "<p style=\"background-color:#b0c4de;font-size:12px;\"> Travel Time: "+(info.travelTime).toFixed(2)+" mins</p>";
	infoHtml += "</div>";
	GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(infoHtml);
    });
	return marker;
}

function visualize(map, arrPlaces, options){

	for(var i = 0; i < arrPlaces.length; i++){
		var place = new GLatLng(arrPlaces[i].lat, arrPlaces[i].lng);
		map.addOverlay(createMarker(place, options, arrPlaces[i]));
	}
}